<template>
  <div>
    <div
      class="choose-items-con"
      @click="choose"
    >
      <div
        v-if="selectData && selectData.length"
        class="tags"
      >
        <p-tag
          v-for="item in selectData"
          :key="item[id]"
          style="margin-right:10px;"
        >
          {{ item[name] || item[id] (已删除) }}
        </p-tag>
      </div>
      <div
        v-else
        class="tags"
      >
        <span class="empty">{{ emptyText }}</span>
      </div>
      <div
        class="icon"
        :class="{'active':isActive}"
      >
        <p-icon type="down" />
      </div>
    </div>
    <p-modal
      v-model="isActive"
      :title="title"
      width="860px"
    >
      <div style="display:flex;align-items:center;">
        <label style="margin:0 8px 0 16px;">
          {{ inputInfo.label }}
        </label>
        <div style="width:240px;">
          <p-input
            v-model="keyword"
            clearable
            :placeholder="inputInfo.placeHolder"
          />
        </div>
        <p-button
          type="primary"
          clearable
          style="margin-left:10px;height:32px"
          @click="search"
        >
          搜索
        </p-button>
      </div>
      <p-table
        :data-source="tableData"
        :rowKey="id"
        :columns="columns"
        v-on="$listeners"
        v-bind="$attrs"
        :scroll="{y:300}"
        style="margin-top:16px;"
        @change="tableChange"
        :pagination="pagination"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, fixed: true}"
      >
        <template
          slot="operation"
          slot-scope="text,record"
        >
          <a
            :style="{'margin-right:10px;':index!=0}"
            v-for="(item, index) in buttons"
            :key="item"
            @click="btnClik(item,record)"
          >
            {{ item }}
          </a>
        </template>
        <span slot="customTitle">
          操作
        </span>
      </p-table>
      <div
        slot="footer"
        class="dialog-footer"
        style="display:flex;align-items:center;"
      >
        <div style="width:100px;">
          <span v-if="!maxSelectNum">已选择({{ chooseList.length }})</span>
          <span v-if="maxSelectNum">已选择({{ chooseList.length }}/{{ maxSelectNum }})</span>
        </div>
        <div class="modal-footer-scroll">
          <p-tag
            v-for="(item,index) in chooseList"
            :key="item[id]"
            closable
            size="mini"
            style="margin-right:10px;"
            @close="removeChoose(item[id],index)"
          >
            {{ item[name] || item[id] (已删除) }}
          </p-tag>
        </div>
        <p-button
          type="primary"
          @click="confirmChoose"
        >
          确 定
        </p-button>
      </div>
    </p-modal>
  </div>
</template>

<script>
export default {
  name: 'ChooseProline',
  props: {
    selectData: {
      type: Array,
      default: () => {
        return []
      }
    },
    name: {
      type: String,
      default: 'name'
    },
    id: {
      type: String,
      default: 'id'
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    inputInfo: {
      type: Object,
      default: () => {
        return {
        }
      }
    },
    maxSelectNum: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: '表格选择器'
    },
    buttons: {
      type: Array,
      default: () => {
        return []
      }
    },
    emptyText: {
      type: String,
      default: '请选择'
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          current: 1,
          total: 0,
          pageSize: 10, // 每页中显示10条数据
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '30', '50'], // 每页中显示的数据
          showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
        }
      }
    }
  },
  data () {
    return {
      searchDept: '',
      orgOptions: [],
      chooseList: [],
      selectedRowKeys: [],
      label: 'name',
      isActive: false,
      keyword: '',
      treeData: [],
      group: ''
    }
  },

  watch: {
    isActive (val) {
      if (!val) {
        this.selectedRowKeys = []
        this.chooseList = []
        this.keyword = ''
        this.pagination.current = 1
        this.pagination.pageSize = 10
      }
    }
  },
  created () {
  },
  mounted () {
    if (this.selectData && this.selectData.length) {
      this.chooseList = [...this.selectData] || []
      this.selectedRowKeys = this.chooseList.map(item => item[this.id])
    }
  },
  methods: {
    search () {
      this.pagination.current = 1
      this.loadData()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      const chooseIds = this.chooseList.map(item => item[this.id])
      this.tableData.forEach(item => {
        if (this.selectedRowKeys.includes(item[this.id]) && !chooseIds.includes(item[this.id])) {
          this.chooseList.push(item)
        } else {
          if (!this.selectedRowKeys.includes(item[this.id]) && chooseIds.includes(item[this.id])) {
            const resIndex = this.chooseList.findIndex(d => d[this.id] === item[this.id])
            this.chooseList.splice(resIndex, 1)
          }
        }
      })
      if (this.chooseList.length > this.maxSelectNum && this.maxSelectNum != -1) {
        this.$warning({
          title: '提示',
          content: `最多选择数量为${this.maxSelectNum}`,
          onOk: () => {
            this.chooseList.splice(this.maxSelectNum, this.chooseList.length - 1)
            this.selectedRowKeys.splice(this.maxSelectNum, this.selectedRowKeys.length - 1)
          }
        })
      }
    },
    choose () {
      this.isActive = true
      if (this.selectData && this.selectData.length) {
        this.chooseList = [...this.selectData]
        this.selectedRowKeys = this.chooseList.map(item => item[this.id])
      }
      this.$nextTick(() => {
        if (this.maxSelectNum == 1) {
          const a = document.querySelector('.poros-table-fixed-left .poros-table-thead .poros-checkbox-wrapper')
          a.style.visibility = 'hidden'
        }
      })
      this.loadData()
    },
    tableChange (pageOptions) {
      this.pagination.current = pageOptions.current
      this.pagination.pageSize = pageOptions.pageSize
      this.loadData()
    },
    loadData () {
      const obj = {
        pageNo: this.pagination.current,
        limit: this.pagination.pageSize
      }
      obj[this.inputInfo.model] = this.keyword
      this.$emit('eventNotice', { type: 'loadData', data: obj })
    },
    removeChoose (id, index) {
      this.chooseList.splice(index, 1)
      this.selectedRowKeys = this.chooseList.map(item => item[this.id])
    },
    confirmChoose () {
      if (this.chooseList.length > this.maxSelectNum && this.maxSelectNum != -1) {
        this.$warning({
          title: '提示',
          content: `最多选择数量为${this.maxSelectNum}`,
        })
        return
      }
      this.isActive = false
      this.$emit('eventNotice', { type: 'confirm', data: this.chooseList })
      this.$emit('update:selectData', this.chooseList)
    },
    btnClik (type, data) {
      this.$emit('eventNotice', { type, data })
    }
  }
}
</script>

<style scoped lang="less">
.choose-items-con {
  border: solid 1px #dededf;
  border-radius: 2px;
  box-sizing: border-box;
  color: #606266;
  transition: border-color 0.2s;
  display: flex;
  width: 100%;
  cursor: pointer;
  margin-top: 4px;
  min-height: 32px;
  line-height: 32px;
  vertical-align: middle;
  &:hover {
    border-color: #ea5411;
  }
  .tags {
    width: calc(100% - 25px);
    max-height: 160px;
    overflow-y: auto;
    padding-left: 15px;
  }
  .empty {
    opacity: 0.6;
  }
  .icon {
    width: 25px;
    cursor: pointer;
    transition: transform 0.3s;
    text-align: center;
    &.active {
      transform: rotate(180deg);
    }
  }
}

.modal-footer-scroll {
  width: calc(100% - 182px);
  text-align: left;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  margin: 0 16px;
  padding: 6px 0;
}
.select-down .a-select-dropdown__item {
  padding: 0;
}
</style>

<style lang="less">
</style>
